<template>
  <div class="otice">
    <p class="title">
      {{$t('message.cement')}}
      <el-input :placeholder="$t('message.entercontent')" v-model="input3" style=" width: 200px;float: right;" class="input-with-select">
        <el-button @click="init" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </p>

    <!-- 列表部分 -->
    <ul class="oticeList"> 
        <router-link v-for="(item,index) in oticeListMsg" :key="index" tag="li" :to="'/DetailsAnnouncement?id='+item.messageId">
            <p><span></span>{{item.title}}</p>
        </router-link>
        <!-- <router-link tag="li" to="/DetailsAnnouncement">
            <p><span></span>火币全球站关于推出阶梯手续费率制度并支持HT抵扣手续费方案的正式公告</p>
        </router-link>
        <router-link tag="li" to="/DetailsAnnouncement">
            <p><span></span>火币全球站关于推出阶梯手续费率制度并支持HT抵扣手续费方案的正式公告</p>
        </router-link> -->
        <el-pagination
        @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :page-size="rows"
            :total="total">
        </el-pagination>
    </ul>
        
  </div>
</template>
<script>
import {regularAnnouncement,getlistNotice} from "../api/api";
import qs from "qs";
export default {
    data(){
        return{
            input3:"",
            page:1,
            rows:5,
            total:1,
            type:0,
            oticeListMsg:[]
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        init(){
            // let data = {
            //     page:this.page,
            //     rows:this.rows,
            //     type:this.type,
            //     title:this.input3
            // }
            getlistNotice().then(res => {
                this.oticeListMsg = res
                console.log(this.oticeListMsg)
                // this.total = res.data.count
            })
        },
        handleCurrentChange(val) {
            this.page = val;
            this.init();
        },
    }
}
</script>

<style lang="scss" scoped>
.otice {
  width: 1200px;
  margin: 0 auto;
  background: #fff;
  min-height: 90vh;
  .title {
    padding: 10px;
    line-height: 40px;
    background: rgba(247, 247, 251, 1);
  }
  .oticeList {
      width: 80%;
      margin: 0px 10%;
      
      li {
          height: 100px;
          border-bottom: 1px solid rgba(244,244,244,1);
          p{
              line-height: 100px;
              color: #999;
              span{
                  display: inline-block;
                  padding: 5px;
                  border-radius: 50%;
                  background: #999;
                  margin-right: 20px; 
              }
          }
      }
      li:hover {
          height: 100px;
          border-bottom: 1px solid rgba(244,244,244,1);
          p{
              line-height: 100px;
              color: #6881FF;
              span{
                  display: inline-block;
                  padding: 5px;
                  border-radius: 50%;
                  background: #6881FF;
                  margin-right: 20px; 
              }
          }
      }
  }
}
</style>